<template>
  <div>
    <div class="qrcode-wrapper" :style="{width: width+'px', height: height+'px'}" >
      <div class="qrcode-con" :style="{width: width+'px', height: height+'px'}">
        <div :id="'qrcode'+ index" ></div>
      </div>
    </div>
  </div>
</template>
<script>
  import QRCode from 'qrcodejs2'

  export default {
    props: {
      value: {
        type: [String, Number],
        default: ''
      },
      index: {
        type: Number,
        default: ''
      },
      width: {
        type: Number,
        default: ''
      },
      height: {
        type: Number,
        default: ''
      }
    },
    data() {
      return {}
    },
    created() {
    },
    mounted() {
      this.qrcode();
    },
    methods: {
      qrcode () {
        let that = this;
        setTimeout(() => {
          let qrcode = new QRCode('qrcode'+ that.index, {
            width: that.width,
            height: that.height,        // 高度
            text:  that.value,   // 二维码内容
            // render: 'table' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
            // background: '#f0f',   // 背景色
            // foreground: '#ff0'    // 前景色
          })
        }, 1)

      }
    }
  }
</script>
<style lang="less" scoped>
  .qrcode-wrapper{
    margin: 0 auto;
    box-sizing: border-box;
    .qrcode-con{
      overflow: hidden;
    }
  }
  .code-num{
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #333;
  }
</style>
